@import "../common/var.scss";

.app {
  background: $color-main;
  position: relative;
  padding: 8rem 0;
  box-sizing: border-box;
}

.login {
  width: 87.625rem;
  height: 44.688rem;
  background: url(/imgs/login-bg.png) center no-repeat;
  background-size: contain;
  position: relative;
  z-index: 2;

  .logo {
    position: absolute;
    top: 2rem;
    left: 13rem;
    height: 5rem;
  }

  .content {
    height: 100%;
    width: 66%;
    margin: 0 auto;
  }

  .illus {
    img {
      width: 24.563rem;
    }
  }

  .auth {
    width: 25.188rem;
    h1 {
      font-size: 2.25rem;
    }
    .security {
      padding: 4.313rem 0 4.75rem;
      img {
        width: 10.25rem;
      }
    }
    #loading {
      &.hide {
        display: none;
      }
    }
    .loading {
      font-size: 3rem;
    }
    .items {
      visibility: visible;
      transform: translateY(0);
      transition: all 0.3s ease-out;
      height: auto;
      &.hide {
        visibility: hidden;
        height: 0;
        transform: translateY(10px);
        overflow: hidden;
      }
    }
    .item {
      display: none;
      height: 3.875rem;
      background-color: #f2f2f2;
      border-radius: 0.5rem;
      padding: 1rem 1.25rem;
      box-sizing: border-box;
      border: solid 0.063rem #f2f2f2;
      cursor: pointer;
      margin-top: 1.125rem;
      &:first-child {
        margin-top: 0;
      }
      &:hover {
        border-color: $color-main;
      }
      img {
        height: 1.938rem;
      }
      span {
        font-size: 1.2rem;
      }
      &.active {
        display: flex;
      }
    }
  }

  &-bg-c {
    &-t {
      position: absolute;
      top: 0;
      right: 0;
      width: 70.875rem;
    }
    &-b {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 111.25rem;
    }
  }
}

.keplr {
  &.uninstall {
    &:hover {
      .label {
        display: none;
      }
      .label-uninstall {
        display: inline;
      }
    }
  }
  .label-uninstall {
    display: none;
  }
}
